<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu default-active="/index" class="el-menu-demo" mode="horizontal" background-color="rgba(24,144,255,1)"
          text-color="#fff" active-text-color="#fff" :ellipsis="false" @select="handleSelect">
          <!-- <el-menu-item>Logo 图标</el-menu-item> -->
          <div class="logo">LOGO</div>
          <div class="flex-grow" />
          <el-menu-item index="/index/home">首页</el-menu-item>
          <el-menu-item index="/index/family-schoolInteraction">家校互动</el-menu-item>
          <el-menu-item index="/index/inform">局校通知</el-menu-item>
          <el-menu-item index="/index/messageStatistics">消息统计</el-menu-item>
          <el-menu-item index="/index/userStatistics">用户统计</el-menu-item>
          <el-menu-item index="/index/schoolManagement">学校管理</el-menu-item>
        </el-menu>
      </el-header>

      <!-- <el-main><RouterView /></el-main> -->

      <el-container>
        <!-- <Aside><RouterView /></Aside> -->
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {alertliststore} from '../stores/counterzsq'
import {onMounted} from 'vue'
import { useRouter } from 'vue-router'



let $store = alertliststore();
onMounted(()=>{
  $store.request_list()
  $store.request_alertdata()
  $store.request_evaluatelist()
})


var router = useRouter()
//点击菜单项的回调, 通过参数path可以获取所点击的菜单项的index属性的值
var handleSelect = (path)=>{

  router.push(path);

}
</script>

<style scoped>
.el-header{
    padding: 0;
    color: white;
}

.el-menu--horizontal>.el-menu-item {
  margin-left: 50px;
}
.logo{
  width: 96px;
  margin-left: 50px;
  text-align: center;
  line-height:58px ;
  font-weight: bold;
  font-size: 20px;
}
</style>